<!-- 用于显示每个测试项（一个数据集）的情况 -->

<template>
    <a-spin :spinning="loading" :delay="1">
        <a-card :bordered="false" size="small">
            <a-row justify="space-around">
                <a-col :span="3" v-for="db in items" :key="db in items">
                    <test-info :test="row" :dataset="col" :database="db"></test-info>
                </a-col>
            </a-row>
            <a-row justify="space-around">
                <a-col :span="24">
                    <!-- <a-table :columns="columns" :data-source="benchmark" size="small" /> -->
                    <!-- <a-list size="small">
                        <a-list-item v-for="b in benchmark" :key="b.createdAt">
                            <a-tooltip>
                                <template #title>{{b.fsize}}</template>
                                {{b.msize}} {{b.rqcnt}} {{b.time}}
                            </a-tooltip>
                        </a-list-item>
                    </a-list> -->
                </a-col>
            </a-row>
        </a-card>
    </a-spin>
</template>

<script>
/* eslint-disable */
import TestInfo from './TestInfo.vue'
import moment from 'moment'

export default {
    name: 'CellCard',
    props: {
        row: String,
        col: String,
        items: Array,
    },
    components:{
        TestInfo,
    },
    data(){
        return {
            loading: true,
            columns:[
                {title: '时态数据量', 'dataIndex': 'msize'},
                {title: '请求个数', 'dataIndex': 'rqcnt'},
                {title: '创建时间', 'dataIndex': 'time'},
            ]
        }
    },
    created(){
        console.log(this.row, this.col, this.items)
    },
    mounted(){
        setTimeout(()=>{
            this.loading=false
        }, 2000)
    },
    computed:{
        benchmark(){
            const tmp = this.$store.state.benchmarks.filter(i=>(i.test==this.row && i.dataset==this.col))
            tmp.forEach(i => {
                i.time = moment(i.createdAt).format('YY/M/D H:m:s')
            });
            return tmp
        }
    }
}
</script>

<style scoped>

</style>
